<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>邮箱</title>
  </head>
  <body>
    邮箱名：
    <input id="email" value="1111@qq.com" type="text" placeholder="邮箱"/>
    <input type="button" value="确定" onclick="show()"/>

    <div id="result"></div>
  </body>

  <script>
      function show() {
          // 获取输入值
          let email = document.getElementById("email").value;

          // 取各个部分：正则更简单
          let atIndex = email.indexOf("@");
          let username = email.substring(0, atIndex);
          let dotIndex = email.indexOf(".");
          let website = email.substring(atIndex + 1, dotIndex);
          let type = email.substring(dotIndex + 1);

          let typeString = '';
          if (type == 'com') {
              typeString = "<span style='color:red'>商业网站</span>"
          } else if (type == 'org') {
              typeString = "<span style='color:red'>组织机构</span>"
          } else if (type == 'mil') {
              typeString = "<span style='color:red'>军队</span>"
          }

          document.getElementById("result").innerHTML = `欢迎您：${username}，你的邮箱由${website}提供，他是一个${typeString}`;
      }
  </script>
</html>
